<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！</title>
    <script src="../js/axios.min.js"></script>
    <link rel="stylesheet" href="../css/swiper-bundle.min.css">
    <link rel="stylesheet" href="../icon/iconfont.css">
    <link rel="stylesheet" href="../common/reset.css">
    <link rel="stylesheet" href="../css/index.css">
    <style>
        html,
        body {
            position: relative;
            height: 100%;
        }

        body {
            background: #eee;
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color: #000;
            margin: 0;
            padding: 0;
        }

        .swiper-container {
            width: 100%;
            height: 100%;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;

            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
        }
        .swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after {
            font-size: 20px;
        }
        .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
            left: -8px;
        }
        .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
            right: -8px;
        }
        .swiper-button-prev {
            border: 1px solid #ccc;
            height: 35px;
            color: rgba(255,255,255,.8);
            background-color: rgba(255,255,255,.3);
            border-radius: 0 50% 50% 0;
        }
        .swiper-button-next {
            border: 1px solid #ccc;
            height: 35px;
            color: rgba(255,255,255,.8);
            background-color: rgba(255,255,255,.3);
            border-radius: 50% 0 0 50%;
        }
        .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
            font-size: 20px;
        }
    </style>
</head>

<body>
<div class="header-w">
    <div class="header">
        <ul class="header-map fl">
            <li class="iconfont icon-dingwei"></li>
            <li style="color: #999">地区</li>
        </ul>
    </div>
</div>
<div class="header-W">
    <div class="header-Warp">
    </div>
</div>
<div class="header-login">
    <div class="logo-w">
        <div class="logo">
            <ul class="goods-classify">
                <li><a href="">家用电器</a></li>
                <li>
                    <a href="">手机</a><span>/</span><a href="">运营商</a><span>/</span
                ><a href="">数码</a>
                </li>
                <li><a href="">电脑</a><span>/</span><a href="">办公</a></li>
                <li>
                    <a href="">家居</a><span>/</span><a href="">家具</a><span>/</span
                ><a href="">家装</a><span>/</span><a href="">厨具</a>
                </li>
                <li>
                    <a href="">男装</a><span>/</span><a href="">女装</a><span>/</span
                ><a href="">童装</a><span>/</span><a href="">内衣</a>
                </li>
                <li>
                    <a href="">美妆</a><span>/</span><a href="">个护</a><span>/</span
                ><a href="">宠物</a>
                </li>
                <li>
                    <a href="">女鞋</a><span>/</span><a href="">箱包</a><span>/</span
                ><a href="">珠宝</a><span>/</span><a href="">手表</a>
                </li>
                <li>
                    <a href="">男鞋</a><span>/</span><a href="">运动</a><span>/</span
                ><a href="">户外</a>
                </li>
                <li>
                    <a href="">房产</a><span>/</span><a href="">汽车</a><span>/</span
                ><a href="">汽车用品</a>
                </li>
                <li><a href="">母婴</a><span>/</span><a href="">玩具乐器</a></li>
                <li>
                    <a href="">食品</a><span>/</span><a href="">酒类</a><span>/</span
                ><a href="">生鲜</a><span>/</span><a href="">特产</a>
                </li>
                <li> <a href="">艺术</a><span>/</span><a href="">礼品鲜花</a><span>/</span
                ><a href="">绿植</a></li>
                <li> <a href="">医疗保健</a><span>/</span><a href="">计生情趣</a></li>
                <li> <a href="">图书</a><span>/</span><a href="">文娱</a><span>/</span
                ><a href="">教育</a><span>/</span><a href="">电子书</a></li>
                <li> <a href="">机票</a><span>/</span><a href="">酒店</a><span>/</span
                ><a href="">旅游</a><span>/</span><a href="">生活</a></li>
                <li> <a href="">理财</a><span>/</span><a href="">众筹</a><span>/</span
                ><a href="">白条</a><span>/</span><a href="">保险</a></li>
                <li> <a href="">安装</a><span>/</span><a href="">维修</a><span>/</span
                ><a href="">清洗</a><span>/</span><a href="">二手</a></li>
                <li><a href="">工业品</a></li>
            </ul>
        </div>
        <div class="logo-cen">
             <!--轮播图区域-->
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../assets/01.jpg.webp" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../assets/02.jpg" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../assets/03.jpg.webp" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../assets/04.jpg.webp" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../assets/05.jpg.webp" alt="">
                    </div>
                    <div class="swiper-slide">
                        <img src="../assets/06.jpg" alt="">
                    </div>
                </div>
                <!-- Add Arrows -->
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="logo-r">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        <div class="logo-p"></div>
        <div class="JS_popCtn fr" style="display: none">
            <div id="cate_item1">

                <ul>
                    <li style="padding: 10px 0">
                        <span>家电馆 &gt;</span><span>家电专卖店 &gt;</span><span>家电服务 &gt;</span><span>企业采购 &gt;</span><span>商用家电 &gt;</span><span>高价回收 &gt;</span>
                    </li>
                    <li>
                        <h3>电视 &gt;</h3>
                        <div class="cate_box">
                            <span>超薄电视</span><span>全面屏电视</span><span>智能电视</span><span>教育电视</span><span>OLED电视</span><span>智慧屏</span><span>4K超清电视</span><span>55英寸</span><span>65英寸</span><span>电视配件</span>
                        </div>
                    </li>
                    <li>
                        <h3>空调 &gt;</h3>
                        <div class="cate_box">
                            <span>教育电视</span><span>OLED电视</span><span>智慧屏</span><span>4K超清电视</span><span>55英寸</span><span>65英寸</span><span>电视配件</span>
                        </div>
                    </li>
                    <li>
                        <h3>空调 &gt;</h3>
                        <div class="cate_box">
                            <span>教育电视</span><span>OLED电视</span><span>智慧屏</span><span>4K超清电视</span><span>55英寸</span><span>65英寸</span><span>电视配件</span>
                        </div>
                    </li>
                    <li>
                        <h3>空调 &gt;</h3>
                        <div class="cate_box">
                            <span>教育电视</span><span>OLED电视</span><span>智慧屏</span><span>4K超清电视</span><span>55英寸</span><span>65英寸</span><span>电视配件</span>
                        </div>
                    </li>
                    <li>
                        <h3>空调 &gt;</h3>
                        <div class="cate_box">
                            <span>教育电视</span><span>OLED电视</span><span>智慧屏</span><span>4K超清电视</span><span>55英寸</span><span>65英寸</span><span>电视配件</span>
                        </div>
                    </li>
                    <li>
                        <h3>空调 &gt;</h3>
                        <div class="cate_box">
                            <span>超薄电视</span><span>全面屏电视</span><span>智能电视</span><span>教育电视</span><span>OLED电视</span><span>智慧屏</span><span>4K超清电视</span><span>55英寸</span><span>65英寸</span><span>电视配件</span>
                        </div>
                    </li>
                    <li>
                        <h3>空调 &gt;</h3>
                        <div class="cate_box">
                            <span>超薄电视</span><span>全面屏电视</span><span>智能电视</span><span>教育电视</span><span>OLED电视</span><span>智慧屏</span><span>4K超清电视</span><span>55英寸</span><span>65英寸</span><span>电视配件</span>
                        </div>
                    </li>
                    <li>
                        <h3>空调 &gt;</h3>
                        <div class="cate_box">
                            <span>超薄电视</span><span>全面屏电视</span><span>智能电视</span><span>教育电视</span><span>OLED电视</span><span>智慧屏</span><span>4K超清电视</span><span>55英寸</span><span>65英寸</span><span>电视配件</span>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>


<!-- Swiper JS -->
<script src="../js/swiper-bundle.min.js"></script>

<!-- Initialize Swiper -->
<script>
    // 轮播区域
    let swiper = new Swiper('.swiper-container', {
        effect: 'fade',
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination'
        },
        loop: true,
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
            stopOnLastSlide: true
        },
        mousewheel: true,
        keyboard: true,
    });
    // 轮播图区域
    function banner() {
        let params = {

        }
        axios.get('http://jx.xuzhixiang.top/ap/api/bannerlist.php', {params}).then((resolve) => {
            console.log(resolve)
            let dataArr = resolve.data.data;
            console.log(dataArr)
            let str = dataArr.map(v => `<div class="swiper-slide">
                                <img src="${v.banner_img_url}" alt="">
                            </div>`)
            // document.querySelector('.swiper-wrapper').innerHTML = str.join('')
        }).catch((reject) => {
            console.log(reject)})
    }
    banner()
    // 商品列表
    function productList() {
        let params = {

        }
        axios.get('http://localhost:1337/api/v1/product_categories', {params}).then((resolve) => {
            console.log(resolve)
        })
    }
    productList()
</script>
</body>
</html>